<template>
  <header class="nav-header">
    <div class="nav-container">
      <router-link to="/" class="logo">
        <img src="@/assets/logo.svg" alt="HUHA DevTools" />
        <div class="version-tag">Beta</div>
      </router-link>
      <nav class="nav-menu">
        <router-link 
          v-for="item in menuItems" 
          :key="item.path"
          :to="item.path"
          class="nav-item"
          active-class="active"
        >
          <el-icon><component :is="item.icon" /></el-icon>
          {{ item.title }}
        </router-link>
      </nav>
      <div class="nav-actions">
        <el-button 
          class="github-btn" 
          @click="openGithub"
        >
          <el-icon>
            <svg-icon icon="github" />
          </el-icon>
        </el-button>
        <el-button 
          class="theme-toggle" 
          @click="themeStore.toggleTheme"
          :icon="themeStore.isDark ? Sunny : Moon"
        />
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { Moon, Sunny, Tools, Monitor, Document } from '@element-plus/icons-vue'
import { useThemeStore } from '@/store'
import SvgIcon from '@/components/SvgIcon.vue'

const themeStore = useThemeStore()

const menuItems = [
  {
    title: '工具箱',
    path: '/tools',
    icon: Tools
  },
  {
    title: '在线调试',
    path: '/playground',
    icon: Monitor
  },
  {
    title: '文档',
    path: '/docs',
    icon: Document
  }
]

const openGithub = () => {
  window.open('https://github.com/your-repo', '_blank')
}
</script>

<style lang="scss" scoped>
@use "@/styles/variables" as *;

.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  transition: all $transition-duration;

  .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    height: $header-height;
    padding: 0 $spacing-lg;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      height: 100%;
      padding: $spacing-sm 0;
      position: relative;
      
      img {
        height: 40px;
        width: auto;
        transition: transform $transition-duration;
        object-fit: contain;
        object-position: left center;
      }
      
      &:hover img {
        transform: scale(1.02);
      }

      .version-tag {
        position: absolute;
        top: 12px;
        right: -36px;
        background: rgba(72, 199, 142, 0.15);
        color: #2ea043;
        border: 1px solid rgba(72, 199, 142, 0.4);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
    }

    .nav-menu {
      display: flex;
      gap: $spacing-md;
      margin-left: $spacing-xl;

      .nav-item {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        border-radius: 6px;
        color: $text-secondary;
        text-decoration: none;
        transition: all $transition-duration;

        .el-icon {
          font-size: 16px;
        }

        &:hover {
          color: $primary-color;
          background: $background-secondary;
        }

        &.active {
          color: $primary-color;
          background: rgba($primary-color, 0.1);
        }
      }
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: $spacing-sm;

      .github-btn {
        width: 32px;
        height: 32px;
        border-radius: 12px;
        border: 1px solid $app-border-color;
        background: transparent;
        color: $text-secondary;
        transition: all $transition-duration;
        padding: 6px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-icon {
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;

          :deep(svg) {
            width: 16px;
            height: 16px;
            fill: currentColor;
          }
        }

        span {
          display: none;
        }

        &:hover {
          background: $background-secondary;
          color: $primary-color;
          transform: translateY(-1px);
        }
      }

      .theme-toggle {
        width: 32px;
        height: 32px;
        border-radius: 12px;
        border: 1px solid $app-border-color;
        background: transparent;
        color: $text-secondary;
        transition: all $transition-duration;
        padding: 6px;
        font-size: 14px;

        &:hover {
          background: $background-secondary;
          color: $primary-color;
          transform: translateY(-1px);
        }

        .el-icon {
          font-size: 14px;
        }
      }
    }
  }
}

// 暗黑模式适配
:root.dark {
  .nav-header {
    .nav-container {
      .logo {
        .version-tag {
          background: rgba(72, 199, 142, 0.1);
          color: #3fb950;
          border-color: rgba(72, 199, 142, 0.3);
        }
        img {
          // SVG 已经包含了暗色模式的颜色，无需额外处理
        }
      }

      .nav-actions {
        .theme-toggle {
          border-color: rgba(255, 255, 255, 0.1);
          color: rgba(255, 255, 255, 0.6);

          &:hover {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.9);
          }
        }

        .github-btn {
          border-color: rgba(255, 255, 255, 0.1);
          color: rgba(255, 255, 255, 0.6);

          &:hover {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.9);
          }

          .el-icon {
            :deep(svg) {
              fill: currentColor;
            }
          }
        }
      }
    }
  }
}

@media (max-width: $screen-sm) {
  .nav-header {
    .nav-container {
      padding: 0 $spacing-md;

      .logo img {
        height: 32px;
      }

      .nav-menu {
        display: none;
      }

      .nav-actions {
        .github-btn {
          span {
            display: none;
          }
        }
      }
    }
  }
}
</style> 